<DocMatSnackbar></DocMatSnackbar>
<DocMatSnackbarContent Secondary="true"></DocMatSnackbarContent>
<DocMatSnackbarActions Secondary="true"></DocMatSnackbarActions>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        <div>Snackbar is open: @snackBarIsOpen</div>
        <MatButton OnClick="ButtonClick">Open</MatButton>
        <MatSnackbar @bind-IsOpen="@snackBarIsOpen">
            <MatSnackbarContent>Can't send photo. Retry in 5 seconds.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised="true">Retry</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        <MatButton OnClick="Button2Click">Stacked</MatButton>
        <MatSnackbar @bind-IsOpen="@snackBar2IsOpen" Stacked="true">
            <MatSnackbarContent>This item already has the label "travel". You can add a new label.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised="true">Add new label</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        <MatButton OnClick="Button3Click">Leading</MatButton>
        <MatSnackbar @bind-IsOpen="@snackBar3IsOpen" Leading="true">
            <MatSnackbarContent>Your photo has been archived.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised="true">Undo</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        @code
        {
            bool snackBarIsOpen = false;
            bool snackBar2IsOpen = false;
            bool snackBar3IsOpen = false;

            void ButtonClick()
            {
                snackBarIsOpen = true;
                this.StateHasChanged();
            }

            void Button2Click()
            {
                snackBar2IsOpen = true;
                this.StateHasChanged();
            }

            void Button3Click()
            {
                snackBar3IsOpen = true;
                this.StateHasChanged();
            }

        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <div>Snackbar is open: @snackBarIsOpen</div>
        <MatButton OnClick=""ButtonClick"">Open</MatButton>
        <MatSnackbar @bind-IsOpen=""@snackBarIsOpen"">
            <MatSnackbarContent>Can't send photo. Retry in 5 seconds.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised=""true"">Retry</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        <MatButton OnClick=""Button2Click"">Stacked</MatButton>
        <MatSnackbar @bind-IsOpen=""@snackBar2IsOpen"" Stacked=""true"">
            <MatSnackbarContent>This item already has the label ""travel"". You can add a new label.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised=""true"">Add new label</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        <MatButton OnClick=""Button3Click"">Leading</MatButton>
        <MatSnackbar @bind-IsOpen=""@snackBar3IsOpen"" Leading=""true"">
            <MatSnackbarContent>Your photo has been archived.</MatSnackbarContent>
            <MatSnackbarActions>
                <MatButton Raised=""true"">Undo</MatButton>
            </MatSnackbarActions>
        </MatSnackbar>

        @code
        {
            bool snackBarIsOpen = false;
            bool snackBar2IsOpen = false;
            bool snackBar3IsOpen = false;

            void ButtonClick()
            {
                snackBarIsOpen = true;
                this.StateHasChanged();
            }

            void Button2Click()
            {
                snackBar2IsOpen = true;
                this.StateHasChanged();
            }

            void Button3Click()
            {
                snackBar3IsOpen = true;
                this.StateHasChanged();
            }

        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>